<template>
	<view>
		<Header :showBack="true" title="商城订单" bgColor="#ace8f6"></Header>
		<view class="nav-box" :style="{'top': statusBarHeight + 'px'}">
			<view v-for="(item,index) in navList" :key="index" class="nav-box-item"
				:class="curIndex == item.id ? 'on' : ''" @click="changeIndex(item.id)">{{item.name}}</view>
		</view>
		
		
		
		<swiper @change="swiperChange" :style="{'height':`calc(100vh - ${statusBarHeight}px - 84rpx)`}" :current="curIndex" :duration="300">
			<swiper-item style="height: 100%;" v-for="(it,idx) in 4" :key="idx">
				<scroll-view @scrolltolower="reachBottom" style="height: 100%;box-sizing: border-box;" scroll-y="true" >
					
					<view @click.stop="toOrderInfo(item.id)" class="item" v-for="(item,index) in orderList[idx].list" :key="index">
						 <view>
							<view>{{item.createTime}}</view>
							<view>订单号：<text selectable>{{item.orderNo}}</text></view>
						</view>
						
						<scroll-view v-if="item.productImageIds" scroll-x="true" >
							<view class="images">
								<image v-for="(imgUrl,imgIndex) in item.productImageIds.split(',')" :src="baseUrl + '/file/api/uploadFile/downloadByKey?id=' + imgUrl" mode="aspectFill" style="border-radius: 13rpx;" :key="imgUrl"></image>
							</view>
						</scroll-view>
						
						<view class="flex-box">
							<view>{{item.orderStatusName}}</view>
							<view class="info">
								共{{item.totalQuantity}}份商品 实付<text>￥{{item.totalPayAmount}}</text>
							</view>
						</view>
						
						<view class="btn" v-if="item.orderStatus==-1" style="border-top: 1upx solid #eeeeee;">
							<view @click.stop="deleteOrder(item.id,index)">删除订单</view>
							<view @click.stop="pay(item.orderNo)" style="color: #ff4040;border-color: #ff4040;">付款</view>
						</view> 
						
					</view>
					
					<view v-if="showQuesheng" class="quesheng">
						<image src="@/static/no-data.png" mode="aspectFill"></image>
						<view >暂无订单数据~</view>
					</view>
					
					 <!-- <view v-if="orderList[index].list.length==0" class="nomore"></view> -->
				</scroll-view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:getApp().globalData.statusBarHeight+44,
				baseUrl:getApp().globalData.baseUrl,
				curIndex:'',
				flag:true,
				orderList:[
					{
						list:[],
						nomore:false,
						page:1
					},
					{
						list:[],
						nomore:false,
						page:1
					},
					{
						list:[],
						nomore:false,
						page:1
					},
					{
						list:[],
						nomore:false,
						page:1
					}
				],
				navList: [ //-1.待支付 0.待发货 1.已发货 2.已完成 3.退款中 4.已退款 5.已取消
					{
						id: 0,
						name: "全部"
					},
					{
						id: 1,
						name: "待支付"
					},
					{
						id: 2,
						name: "待发货"
					},
					{
						id: 3,
						name: "已配送"
					}
				
				],
				showQuesheng:false
			}
		},
		onLoad(e) {
			console.log(e)
			this.curIndex = Number(e.index)
			if(e.index==0){
				this.getList()
			}
		},
		methods: {
			pay(orderNo){
				let that = this
				this.$http('/member/api/mall/payMallOrder?mallOrderNo='+orderNo +'&openId=' + uni.getStorageSync('openId'),{},res=>{
					this.$http('/pay/api/pay/pay',res.data,pay=>{
						console.log(pay)
						uni.requestPayment({
						    provider: 'wxpay',
						    timeStamp: pay.data.timeStamp,
						    nonceStr: pay.data.nonceStr,
						    package: pay.data.package,
						    signType: pay.data.signType,
						    paySign: pay.data.paySign,
						    success: function (res1) {
						        that.orderList.forEach((item,index)=>{
									that.orderList[index].list = []
									that.orderList[index].nomore = false
									that.orderList[index].page = 1
								})
								that.flag = true
								that.getList()
						    },
						    fail: function (err) {
						        console.log('fail:' + JSON.stringify(err));
						    }
						});
					})
				})
			},
			deleteOrder(id,index){
				this.$http('/member/api/mall/deleteMallOrder',[id],res=>{
					uni.showToast({
						icon:'none',
						title:'删除成功'
					})
					this.orderList[this.curIndex].list.splice(index,1)
					
					let delIndex = this.curIndex == 0?1:0
						console.log(delIndex)
					for(let i = 0 ; i < this.orderList[delIndex].list.length ; i++){
						if(this.orderList[delIndex].list[i].id == id){
							this.orderList[delIndex].list.splice(i,1)
						}
					}
					
				})
			},
			getList(){
				this.flag = false
				let statu
				switch(this.curIndex){
					case 0:statu = '';
					break;
					case 1:statu = -1;
					break;
					case 2:statu = 0;
					break;
					case 3:statu = 1;
					break;
				}
				this.$http('/member/api/mall/getOwnerMallOrderList',{ "condition":{"orderStatus":statu},
				"pageNum": this.orderList[this.curIndex].page,
				"pageSize": 15},res=>{
					this.orderList[this.curIndex].list = this.orderList[this.curIndex].list.concat(res.data.items)
					
					if(this.orderList[this.curIndex].list.length==res.data.totalCount){
						this.orderList[this.curIndex].nomore = true
					}
					this.flag = true
					
					if(this.orderList[this.curIndex].list.length == 0){
						setTimeout(() => {
							this.showQuesheng = true
						}, 500)
					}else {
						setTimeout(() => {
							this.showQuesheng = false
						}, 500)
					}
					
				})
			},
			reachBottom(){
				console.log('滑动到底')
				if(!this.orderList[this.curIndex].nomore&&this.flag){
					this.orderList[this.curIndex].page++
					this.getList()
				}
			},
			swiperChange(e){
				this.changeIndex(e.detail.current)
				if(!this.orderList[this.curIndex].nomore&&this.orderList[this.curIndex].list.length==0){
					this.getList()
				}
			},
			changeIndex(index){
				this.curIndex = index
			},
			toOrderInfo(id){
				uni.navigateTo({
					url:'/pages/shopMall/orderInfo?id='+id
				})
			}
		}
		
	}
</script>

<style scoped lang="less">
.tab{
	width: 100%;
	position: fixed;
	background-color: #FFFFFF;
	font-size: 30upx;
	font-weight: 900;
	color: #888888;
	>view:first-child{
		display: flex;
		>view{
			width: 25%;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
		}
		>view.active{
			color: #ace8f6;
		}
	}
	>view:last-child{
		width: 25%;
		height: 4upx;
		background-color: #ace8f6;
		transition: 0.1s all ease;
	}
}
.item{
	width: 710rpx;
	margin: 0 20rpx;
	background-color: #FFFFFF;
	border-radius: 13rpx;
	margin-bottom: 20upx;
	scroll-view{
		width: 710upx;
		margin: 0 auto;
		height: 160upx;
		border-radius: 10upx;
		view.images{
			display: flex;
			align-items: center;
			height: 100%;
			padding-left: 25upx;
			>image{
				width: 110upx;
				height: 110upx;
				margin-right: 25upx;
				flex-shrink:0;
			}
		}
	}
	>view:first-child{
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 90upx;
		line-height: 90upx;
		font-size: 28upx;
		color: #333333;
		font-weight: 300;
		box-sizing: border-box;
		padding: 0 20upx;
		align-items: center;
		>view{
			height: 90upx;
			line-height: 90upx;
		}
	}
	.flex-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26upx;
		padding: 0 20upx;
		.info{
			// width: 100%;
			height: 90upx;
			line-height: 90upx;
			color: #333333;
			font-weight: 300;
			text-align: right;
			font-size: 26upx;
			box-sizing: border-box;
			padding-right: 20upx;
			>text{
				font-weight: 600;
			}
		}
	}
	
	.btn{
		width: 100%;
		height: 90upx;
		line-height: 90upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: #333333;
		font-weight: 300;
		font-size: 26upx;
		>view{
			width: 150upx;
			height: 56upx;
			line-height: 56upx;
			border-radius: 28upx;
			text-align: center;
			border: 1px solid #999999;
			margin-right: 20upx;
			overflow: auto;
		}
	}
}

	.nav-box {
		width: 710rpx;
		margin: 0 20rpx;
		display: flex;
		align-items: center;
		padding: 6rpx;
		background: #ace8f6;
		border-radius: 40rpx;
		height: 68rpx;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
		font-size: 24rpx;

		.nav-box-item {
			flex: 1;
			color: #fff;
			text-align: center;
		}

		.nav-box-item.on {
			background: #fff;
			color: #0022ab;
			border-radius: 40rpx;
			height: 56rpx;
			line-height: 56rpx;
		}
	}
		
		
		
	.quesheng{
		width: 100%;
		font-size: 26upx;
		text-align: center;
		color: #999999;
		padding: 50upx 0;
		image{
			width: 200rpx;
			height: 200rpx;
			margin-top: 20rpx;
		}
	}		
	
</style>
